


Tumblr-style CSS Tweaks

by Aposiopesis



Category: No Fandom
Genre: CSS, Fanwork Research & Reference Guides, HTML, Work Skin
Language: English
Status: Completed
Published: 2019-10-21
Updated: 2019-10-21
Packaged: 2020-12-24 12:37:35
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 3
Words: 2,075
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/21099596
Author URL: https://archiveofourown.org/users/Aposiopesis/pseuds/Aposiopesis
Summary: Based onphyripo's guide, with some usability improvements made to reblogs and photoset creation.





	1. Explanation and Preview

**Author's Note:**

  * Inspired by [How to Make Tumblr posts on AO3](https://archiveofourown.org/works/11474979) by [phyripo](https://archiveofourown.org/users/phyripo/pseuds/phyripo). 

> I recommend pulling up the code next to the preview; this might help make it easier to understand. Failing that, please let me know if anything is unclear.
> 
> I'd also like to see what you do if you use this in a fanfic! :)

This document assumes you're familiar with [the original ](https://archiveofourown.org/works/11474979/chapters/25731342), and HTML not covered here is available there. **Please note that CSS should be copied as a whole from this document to use these changes.**

Unlike the original, I use `t_` instead of `tungle`. This is a personal preference; find and replace `t_` with whatever you like, as long as it's consistent. HTML used in this chapter and CSS from the skin are in chapters 2 and 3 respectively.

As a lot of the code remains the same on the HTML side, I've skipped post types that I didn't meaningfully edit. Changes that apply to them are:

  * I've made the posts render as true 540px to properly fit images and keep even borders; this may not work ideally on mobile. I'd edit this with a `@media` query (it would be fun if it rendered as Tumblr mobile on phones, right?), but AO3 does not allow these.
  * I've edited the notes and URL to better place them in the boxes, as I was having rendering issues.
  * I've updated all links with `http://` to `https://`. In certain browsers, `http://` links and image sources can cause a warning message to appear because "parts of the page are not secure." This can trick people into thinking your page is hosting a virus or something, when it isn't at all. `https://` does the same thing, but makes it secure, so the warning won't appear.

The only update for reblogs from the original is that this code:
    
    
    <span class="t_url">BLOG URL </span><img class="reblog" src="https://i.imgur.com/AEaCuxO.png" /><span class="reblogurl"> RB URL</span>
    <span class="reblogorigin">
    <span class="reblogheader"><img class="reblogicon" src="OP IMAGE" /> <span class="sourceurl">OP URL</span></span>
    
    <span class="reblogtext">
    TEXT HERE
    </span></span>

has been changed to this:
    
    
    <span class="t_url">BLOG URL </span><img class="reblog" src="https://i.imgur.com/AEaCuxO.png" /><span class="reblogurl"> RB URL</span>
    <span class="reblogorigin"></span>
    <span class="reblogheader"><img class="reblogicon" src="OP IMAGE" /> <span class="sourceurl">OP URL</span></span>
    
    <span class="reblogtext">
    TEXT HERE
    </span>

(Yes, they are very similar. I had to click back and forth in the editor to find the difference.) Here's a live preview:

aposiopesis-ao3  kuchlkastl7 battle-tosti Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  kuchlkastl7 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Source: battle-tosti #here is a tag#and here is Another Tag #tags tags tags tags tags tags tagstagstagstagstags 3,035,204 notes 

I've heavily modified the way photosets are rendered to allow for more modular customization. One of the casualties of my tweaks was the photoset url tag. So, instead of using `t_url`, use `t_photourl` for a photoset. Otherwise, the only difference is the classes.

I've separated the classes so that, instead of something like `t_two_one`, which uses one class for both number of images and position, the same image would be classed as `t_two left`, with `t_two` for number of images and `left` for position. The space is important!

Here are the classes for number of images:

  1. `t_one` (a new addition for a one-image row; `t_img` doesn't play nice with photosets)
  2. `t_two`
  3. `t_three`

And here they are for position, with their original counterparts in parentheses for reference. Note that the code in parentheses **will not work**.

  1. `left` (`t_two_one` and `t_three_one`)
  2. `mid` (`t_three_two`)
  3. `right` (`t_two_two` and `t_three_three`)

For obvious reasons, `t_one` can't take a position, and `t_two` can't take the `mid` position. If you'd like to change these to different names to disambiguate from other work CSS, keep in mind that there are properties like `float: right;` in the CSS, so a global find and replace may break your code.

Part of the reason for these changes was to prevent the need for code like `t_two_four`, which could quickly get confusing. Instead, photosets now have different default heights for two-image and three-image rows, as well as separate dimension classes which can be applied to _any_ photoset row to alter height (in this case, `t_two_four` becomes `t_two right portrait`).

This is the CSS for the `portrait` class: `#workskin .portrait { height: 412px; }`

I chose this height because it was used in the original guide; it has no special meaning. Keep in mind, Tumblr automatically shows images as **cropped**, but these will be **stretched or squished**, so if you want that authentic Tumblr look, you'll need to crop them yourself.

Here's how the height class `portrait` class, used here in the second row, can change the dimensions of an image. All images on the same line must either have the _same_ dimension class or _no_ dimension class; otherwise, it'll break the illusion.

aposiopesis-ao3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  #here is a tag#and here is Another Tag #tags tags tags tags tags tags tagstagstagstagstags 3,035,204 notes 

You can create new image heights by copying the code for `.portrait`, changing the name to something unique that you prefer, and editing the `height` value. For example, here I've applied the `short` class to two `t_one` images and a row of `t_three` images.

The CSS looks like this: `#workskin .short { height: 50px; }`.

aposiopesis-ao3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  #here is a tag#and here is Another Tag #tags tags tags tags tags tags tagstagstagstagstags 3,035,204 notes 

Image credits: [blue lemon sliced into two halves by davisco](https://unsplash.com/photos/5E5N49RWtbA), [multicolored hallway by Efe Kurnaz](https://unsplash.com/photos/RnCPiXixooY).

Next up, the HTML used to render these posts!


	2. HTML examples

**Summary for the Chapter:**

> This is the HTML used in the example posts from last chapter.

This is the example reblog:
    
    
    <div class="t_">
    <p class="t_body">
    
    <span class="t_url">aposiopesis-ao3 </span><img class="reblog" src="https://i.imgur.com/AEaCuxO.png" /><span class="reblogurl"> kuchlkastl7</span>
    <span class="reblogorigin"></span>
    <span class="reblogheader"><img class="reblogicon" src="https://i.imgur.com/ajrMZEK.jpg" /> <span class="sourceurl">battle-tosti</span></span>
    
    <span class="reblogtext">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </span>
    
    <span class="reblogorigin">
    <span class="reblogheader">
    <img class="reblogicon" src="https://i.imgur.com/eZRGD3y.jpg" /> <span class="sourceurl">kuchlkastl7</span>
    </span>
    <span class="reblogtext">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </span>
    
    </span>
    <span class="t_tags">
    <span class="t_tag">Source: battle-tosti</span>
    </span>
    <span class="t_tags">
    <span class="t_tag">#here is a tag</span><span class="t_tag">#and here is Another Tag</span> <span class="t_tag">#tags tags tags tags tags tags tagstagstagstagstags</span>
    </span>
    
    <span class="t_notes">
    3,035,204 notes
    </span>
    
    <img class="t_icons" src="https://i.imgur.com/LWKqh4u.png" />
    </p></div>

This is the first photoset, showing the `portrait` dimension class:
    
    
    <div class="t_">
    <p class="t_body">
    
    <span class="t_photourl">aposiopesis-ao3</span>
    
    <img class="t_two left" src="https://i.imgur.com/ajrMZEK.jpg" />
    <img class="t_two right" src="https://i.imgur.com/eZRGD3y.jpg" />
    <img class="t_two left portrait" src="https://i.imgur.com/eZRGD3y.jpg" />
    <img class="t_two right portrait" src="https://i.imgur.com/ajrMZEK.jpg" />
    
    <span class="t_text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </span>
    
    <span class="t_text">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </span>
    
    <span class="t_tags">
    <span class="t_tag">#here is a tag</span><span class="t_tag">#and here is Another Tag</span> <span class="t_tag">#tags tags tags tags tags tags tagstagstagstagstags</span>
    </span>
    
    <span class="t_notes">
    3,035,204 notes
    </span>
    
    <img class="t_icons" src="https://i.imgur.com/LWKqh4u.png" />
    </p></div>

This is the second photoset, showing the `short` dimension class:
    
    
    <div class="t_">
    <p class="t_body">
    
    <span class="t_photourl">aposiopesis-ao3</span>
    
    <img class="t_one short" src="https://i.imgur.com/ajrMZEK.jpg" />
    <img class="t_three left" src="https://i.imgur.com/eZRGD3y.jpg" />
    <img class="t_three mid" src="https://i.imgur.com/ajrMZEK.jpg" />
    <img class="t_three right" src="https://i.imgur.com/eZRGD3y.jpg" />
    <img class="t_three left short" src="https://i.imgur.com/ajrMZEK.jpg" />
    <img class="t_three mid short" src="https://i.imgur.com/eZRGD3y.jpg" />
    <img class="t_three right short" src="https://i.imgur.com/ajrMZEK.jpg" />
    <img class="t_one short" src="https://i.imgur.com/eZRGD3y.jpg" />
    
    <span class="t_text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </span>
    
    <span class="t_text">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </span>
    
    <span class="t_tags">
    <span class="t_tag">#here is a tag</span><span class="t_tag">#and here is Another Tag</span> <span class="t_tag">#tags tags tags tags tags tags tagstagstagstagstags</span>
    </span>
    
    <span class="t_notes">
    3,035,204 notes
    </span>
    
    <img class="t_icons" src="https://i.imgur.com/LWKqh4u.png" />
    </p></div>

Next chapter: CSS.


	3. CSS

**Summary for the Chapter:**

> This is the CSS used in the workskin.
    
    
    #workskin .t_ {
      max-width: 540px;
      font-family: Gibson,Helvetica Neue,HelveticaNeue,Helvetica,Arial,sans-serif;
      display: table;
      margin: auto;
      color: #444444;
      box-sizing: border-box;
    }
    
    #workskin .t_body {
      background-color: #ffffff;
      border-radius: 3px;
      border-style: solid;
      border-width: .1em;
      border-color: #dddddd;
      float: left;
      position: relative;
      padding: 15px 0 0;
      width: 540px;
    }
    
    #workskin .t_url,
    #workskin .t_photourl {
      position: relative;
      top: -.2em;
      font-weight: 700;
      font-size: 14px;
      margin-left: 20px;
      line-height: 20px;
      height: 20px;
    }
    
    #workskin .t_photourl {
      display: block;
    }
    
    #workskin .t_text {
      display: inline-block;
      margin-top: 15px;
      margin-left: 20px;
      line-height: 21px;
      font-size: 14px;
      width: 92%;
      word-wrap: break-word;
    }
    
    #workskin .t_text a {
      color: #444444;
    }
    
    #workskin .t_h {
      display: inline-block;
      margin-left: 20px;
      font-weight: 400;
      font-size: 36px;
      line-height: 47px;
      width: 92%;
      word-wrap: break-word;
    }
    
    #workskin .t_tags {
      display: inline-block;
      width: 92%;
      font-size: 13px;
      color: #8f8f8f;
      margin-top: 15px;
      line-height: 20px;
      position: relative;
      margin-left: 20px;
    }
    
    #workskin .t_tag {
      margin-left: 12px;
    }
    
    #workskin .t_tag:first-of-type {
      margin-left: 0px;
    }
    
    #workskin .t_notes {
      font-size: 14px;
      font-weight: bold;
      color: #8f8f8f;
      line-height: 45px;
      position: relative;
      margin-left: 20px !important;
      display: inline-block;
    }
    
    #workskin .t_icons {
      height: 45px;
      width: auto;
      float: right;
      margin-right: 10px;
    }
    
    #workskin .t_one {
      width: 540px;
      margin: 4px 0 0 0;
      vertical-align: top;
    }
    
    #workskin .t_img {
      max-width: 100%;
      height: auto;
    }
    
    #workskin .t_two,
    #workskin .t_three {
      margin: 4px 0 0 4px;
      vertical-align: top;
      display: inline-block;
      box-sizing: border-box;
      overflow: hidden;
    }
    
    #workskin .t_two {
      width: 268px;
      height: 177px;
    }
    
    #workskin .t_three {
      height: 120px;
      width: 177px;
    }
    
    #workskin .portrait {
      height: 412px;
    }
    
    #workskin .short {
      height: 50px;
    }
    
    #workskin .left {
      margin-left: 0 !important;
      float: left;
    }
    
    #workskin .right {
      float: right;
    }
    
    #workskin .mid {
      width: 178px !important;
    }
    
    #workskin .t_quote {
      display: inline-block;
      margin-top: 15px;
      margin-bottom: 1px;
      margin-left: 35px;
      line-height: 42px;
      font-size: 36px;
      width: 89%;
      word-wrap: break-word;
      font-family: Georgia, serif;
      text-indent: -15px;
    }
    
    #workskin .t_quote:before {
      content: "\201C";
    }
    
    #workskin .t_quote:after {
      content: "\201D";
    }
    
    #workskin .quotesourcedash {
      width: 20px;
      margin-left: 20px;
    }
    
    #workskin .quotesource {
      display: inline-block;
      margin-bottom: 15px;
      line-height: 21px;
      font-size: 14px;
      width: 90%;
      word-wrap: break-word;
    }
    
    #workskin .t_ask {
      background-color: #f2f2f2;
      border: 1px solid #f2f2f2;
      border-radius: 3px;
      float: left;
      position: relative;
      padding: 15px 14px 18px;
      display: inline-block;
      margin-top: 15px;
      margin-left: 20px;
      line-height: 21px;
      font-size: 14px;
      width: 80%;
      word-wrap: break-word;
    }
    
    #workskin .t_asktip {
      display: inline;
      position: absolute;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid #f2f2f2;
      right: -8px;
      top: 10px;
    }
    
    #workskin .t_askicon {
      display: inline-block;
      float: right;
      height: 37px;
      width: 37px;
      margin-top: 15px;
      border-radius: 2px;
      margin-right: 15px;
    }
    
    #workskin .t_asker {
      color: #a6a6a6;
      font-size: 13px;
      display: inline-block;
      width: 100%;
      line-height: 21px;
      margin-bottom: 7px;
    }
    
    #workskin .t_chat {
      display: inline-block;
      font-size: 14px;
      width: 92%;
      line-height: 1.4;
      font-family: Courier, monospace;
      padding-top: 3px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 3px;
      margin-top: 15px;
      margin-left: 20px;
    }
    
    #workskin .t_line {
      display: block;
      padding-top: 6px;
      padding-right: 0px;
      padding-bottom: 6px;
      padding-left: 0px;
      width: 100%;
    }
    
    #workskin .t_line:first-of-type {
      padding-top: 0px;
    }
    
    #workskin .t_line:last-of-type {
      padding-bottom: 0px;
    }
    
    #workskin .t_line:nth-of-type(even) {
      background: #fdfdfd;
    }
    
    #workskin .strong {
      font-weight: 700;
    }
    
    #workskin .t_line>strong:after {
      content: "\A0";
    }
    
    #workskin .reblog {
      height: 15px;
      width: auto;
    }
    
    #workskin .reblogheader {
      position: relative;
      line-height: 25px;
      padding-top: 15px;
      padding-left: 20px;
      width: 96%;
      display: inline-block;
      border-top: 1px solid #e7e7e7;
      margin-top: 5px;
    }
    
    #workskin .reblogurl {
      position: relative;
      top: -.2em;
      font-weight: 700;
      font-size: 13px;
      margin-top: 50px;
      margin-bottom: 10px;
      line-height: 25px;
      height: 25px;
      color: #8f8f8f;
    }
    
    #workskin .reblogicon {
      border-radius: 2px;
      width: 25px;
      height: 25px;
      vertical-align: baseline;
    }
    
    #workskin .sourceurl {
      position: relative;
      font-weight: 700;
      font-size: 13px;
      vertical-align: top;
      display: inline-block;
    }
    
    #workskin .reblogorigin {
      width: 100%;
      word-wrap: break-word;
      padding-top: 20px;
      padding-bottom: 15px;
      padding-right: 20px;
    }
    
    #workskin .reblogtext {
      display: inline-block;
      margin-top: 10px;
      margin-left: 20px;
      margin-bottom: 10px;
      line-height: 21px;
      font-size: 14px;
      width: 92%;
      word-wrap: break-word;
    }
    
    #workskin .reblogtext a {
      color: #444444;
    }
    


End file.
